/*eslint-disable*/

import React, { useState, useEffect} from 'react'
import { Cascader, Button, Modal, Input, message, Radio } from 'antd';
import '../housing/index.css'
import Linkage from '../../../components/linkage'
import { Table, Space } from 'antd';
import request from '../../../utils/request'
const housing = (props) => {

    const {history}=props

    const goback=()=>{
        history.push('/home/housing2')
    }

    //添加弹框
    const addModal = () => {
        setFlag(false)
        setIsModalVisible(true);
    };
    //取消键
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //编辑弹框
    const edit = (id) => {
        setFlag(true)
        setIsModalVisible(true)
        setid(id)
        //数据回显
    }
    //跳转详情页面
    const godetail=(id)=>{
        history.push({pathname:"/home/detail",id:id})
    }
    //弹框开关
    //   const [isModalVisible, setIsModalVisible] = useState(false);

    //自定义开关
    const [flag, setFlag] = useState(false)

    //输入绑定的内容
    const [english, setEnglish] = useState("")//标题楼盘名称

    const [title, setTitle] = useState("")//详细地址名称
    const [word, setWord] = useState("")//创建人自定义数据
    const [num, setNum] = useState("")//创建人自定义数据
    const [id, setid] = useState(null)//自定义自己的id
    //列表结构
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '楼盘名称',
            dataIndex: 'english',
            key: 'english',
        },
        {
            title: '详细地址',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '价格',
            dataIndex: 'word',
            key: 'word',
        },
        {
            title: '排序',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '更新时间',
            dataIndex: 'timer',
            key: 'timer',
        },
        {
            title: '状态',
            dataIndex: '',
            key: '',
        },
        {
            title: '经纪人',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => godetail(record.id)}>详情</a>
                    <a onClick={() => edit(record)}>编辑</a>
                    <a onClick={() => remove(record.id)}>删除</a>
                    <a>指派经纪人</a>
                </Space>
            ),
        },
    ];

    const [data, setData] = useState([])

    const [isModalVisible, setIsModalVisible] = useState(false);

    //添加数据或修改数据
    const handleOk = async () => {
        setIsModalVisible(false);
        if (flag) {
            const res = await request({
                url: "/api/listedit",
                method: "post",
                data: {
                    english,
                    title,
                    word,
                    num,
                    id
                }
            })
            console.log(res);
            getList()
            message.success("编辑成功")
        } else {
            const res = await request({
                url: "/api/listadd",
                method: "post",
                data: {
                    english,
                    title,
                    word,
                    num
                }
            })
            console.log(res);
            getList()
            message.success('添加成功');
        }
    };

    useEffect(() => {
        getList()
    }, [])
    //数据
    const getList = async () => {
        const res = await request.get('/api/list')
        setData([...res.data.data])
    }
    //数据删除
    const remove = (id) => {
        request.delete('/api/listdel', { id: id }).then(res => {
            getList()
            message.success("删除成功")
        })
    }

    //搜索
    const search = (value) => {
        request.post('/api/listsearch', { value: value }).then(res => {
            console.log(res);
        })
    }
    return (
        <div>
            <header>
                房源管理
            </header>
            <div className="housing">
                <div className="home-head">
                    <Radio.Group>
                        <Radio.Button value="xiaoshou">销售楼盘</Radio.Button>
                        <Radio.Button value="fnagwu" onClick={()=>{goback()}}>房屋租凭</Radio.Button>
                    </Radio.Group>
                </div>
                <main>
                    <div className="hou-a">
                        {/* <div><Cascader options={options1} onChange={onChange} placeholder="请选择省份" /></div>
                        <div><Cascader options={options2} onChange={onChange} placeholder="请选择城市" /></div>
                        <div><Cascader options={options3} onChange={onChange} placeholder="请选择区/县" /></div> */}
                                                                                                                                                        <Linkage/>
                        <div className="inp"> <input type="text" placeholder="请输入关键词" onChange={(e) => search(e.target.value)} /><Button type="primary">搜索</Button></div>
                    </div>

                    <div className="hou-b">
                        <div><Button type="primary" onClick={() => addModal()}>新增</Button></div>
                    </div>

                    <div className="hou-c">
                        <Table columns={columns} dataSource={data} />
                    </div>
                    <Modal title={flag === false ? "添加" : "编辑"} visible ={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='addBox'>
                        <p><span>楼盘名称</span><Input value={english} placeholder="楼盘名称" onChange={(e) => setEnglish(e.target.value)} /></p>
                        <p><span>详细地址</span><Input value={title} placeholder="详细地址" onChange={(e) => setTitle(e.target.value)} /></p>
                        <p><span>价格</span><Input value={word} placeholder="价格" onChange={(e) => setWord(e.target.value)} /></p>
                        <p><span>排序</span><Input value={num} placeholder="排序" onChange={(e) => setNum(e.target.value)} /></p>
                    </Modal>
                </main>
            </div>
        </div>
    )
}

export default housing
